<template>
	<view class="page" v-if='isShow'>
		<!-- 图片广告 -->
		<view class="ad_pic" v-if="adType == 1" @click='goAdDetail'>
			<fu-image :src="pic" mode="aspectFill"></fu-image>
		</view>
		<view v-if="adType == 1" @click="jump" class="cu-btn round jump">
			<text class="text-sm" v-if='jumpTime'>{{i18n['跳过']}}：<text class="text-sm"> {{ jumpTime }}</text> s</text>
		</view>
		<!-- 视频广告 -->
		<video v-if="adType == 2" class="ad_video" :src="video" :autoplay='true' :muted='isSound' :loop='false'
			@click='goAdDetail' :direction='0' :controls='false' :show-center-play-btn='false'
			:enable-progress-gesture='false' :vslide-gesture-in-fullscreen='false' @error="playError" @play='playStart'
			@ended='ended' object-fit='cover'>
			<cover-view @click.stop="jump" class="cu-btn round cover-text jump">{{i18n['跳过']}}</cover-view>
			<cover-image class="cover-image-sound" :src="imgWechatUrl+'/index/off.png'" @click='offSound'
				v-if='isSound'>
			</cover-image>
			<cover-image class="cover-image-sound" :src="imgWechatUrl+'/index/on.png'" @click='onSound' v-if='!isSound'>
			</cover-image>
		</video>
	</view>
</template>

<script>
	let isAd;
	export default {
		name: 'Ad',
		data() {
			return {
				imgWechatUrl: this.imgWechatUrl,
				isSound: true,
				isShow: false, // 显示
				jumpTime: null, // 倒计时时间
				jumpUrl: '', // 广告跳转链接
				timer: null, // 计时器
				adType: 1, // 广告类型，控制显示哪一种
				pic: '',
				video: '',
			}
		},
		computed:{
			
			  isLogin(){
				  return this.$store.getters.isLogin
			  }
		},
		onLoad() {
			this.setNavigationBarTitle(this.i18n['广告页'])
			isAd = uni.getStorageSync('AD_INFO');
			if (!isAd) {
				uni.reLaunch({
					url: '/pages/index/launch/launch-page/index'
				})
				return
			}
			// 获取数据 广告类型
			this.$api.post(global.apiUrls.postOperationGetAds, {
				typeid: 12
			}).then(res => {
				if (res.data.code == 1) {
					this.isShow = true
					// 判断视频或者图片广告页
					console.log('广告页数据', res.data.data)
					// 空数据，不显示，隐藏广告页功能
					if (res.data.data.length == 0) return this.jump()
					let flag = false
					res.data.data.forEach((item, index) => {
						if (item.type == 2) {
							this.video = item.video
							this.adType = 2
							if (item.href) {
								this.jumpUrl = item.href
							}
							flag = true
						}
					});
					// 判断视频不存在，展示图片广告页
					if (!flag) {
						this.adType = 1;
						this.pic = res.data.data[0].thumb
						this.jumpTime = 5
						if (res.data.data[0].href) {
							this.jumpUrl = res.data.data[0].href
						}
						// 开启计时器
						setTimeout(() => {
							this.countDown();
						}, 500)
					}
				}
			}).catch(err => {
				console.log("没有广告数据", err);
				this.jump();
			})
		},
		// 监听页面卸载
		onUnload() {
			// 关闭计时器
			if (this.adType != 2) {
				clearInterval(this.timer);
			}
		},
		methods: {
			// 跳转广告页详情
			goAdDetail() {
				console.log(this.jumpUrl)
				uni.setStorageSync('ad_jumpUrl', this.jumpUrl);
			if (!this.isLogin) uni.reLaunch({ url: '/pages/user/login/login-code/index' });
			if (this.isLogin) uni.switchTab({ url: '/pages/tab/home/shopindex/index' });
				// 回首页记录首页地址
				// uni.reLaunch({ url: this.jumpUrl })
			},
			// 声音操作
			onSound() {
				this.isSound = true
				console.log(this.isSound)
			},
			offSound() {
				this.isSound = false
				console.log(this.isSound)
			},
			// 视频播放结束
			ended() {
				console.log('页面跳转')
				uni.reLaunch({
					url: '/pages/user/login/login-code/index'
				})
			},
			// 倒计时
			countDown() {
				this.timer = setInterval(() => {
					this.jumpTime--;
					if (this.jumpTime <= 0) {
						this.jump();
					}
				}, 1000);
			},
			// 页面跳转
			jump() {
				console.log('页面跳转')
				clearInterval(this.timer);
				if (!this.isLogin) uni.reLaunch({ url: '/pages/user/login/login-code/index' });
				if (this.isLogin) uni.switchTab({ url: '/pages/tab/home/shopindex/index' });
				
			},
			// 播放失败
			playError(e) {
				console.log('播放失败', e)
			},
			// 开始播放
			playStart(e) {
				console.log('开始播放')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		position: relative;
		width: 100%;
		height: 100vh;

		.ad_pic {
			position: absolute;
			width: 100%;
			height: 100vh;
		}

		.ad_video {
			position: absolute;
			width: 100%;
			height: 100vh;
		}

		.jump {
			position: absolute;
			z-index: 99;
			top: 60rpx;
			right: 24rpx;
		}

		.cover-image-sound {
			width: 60rpx;
			height: 60rpx;
			position: absolute;
			z-index: 99;
			top: 60rpx;
			left: 40rpx;
		}

		/* #ifdef APP-PLUS */
		.jump {
			top: 120rpx;
		}

		.cover-image-sound {
			top: 120rpx;
		}

		.cover-text {
			width: 200rpx;
			height: 50rpx;
			text-align: center;
			line-height: 45rpx;
		}

		/* #endif */
	}
</style>
